/**
 * Created by maxiaoqiang on 2018/9/10.
 */
import React, {Component} from "react";

import {Input, Select, Modal, Button, message, Spin} from 'antd';

const Option = Select.Option;
const {TextArea} = Input;

import "./index.less"
class SubjectComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            categories: [],
            data: {
                id: "",
                name: "",
                examCategoryId: "",
                status: "",
                note: ""
            }
        }
    }

    componentDidMount() {
        if (this.props.data) {
            this.setState({
                data: this.props.data
            })
        }else{
            if (this.props.choose) {
                let data = this.state.data;
                data.examCategoryId = this.props.choose;
                this.setState({
                    data: data
                })
            }
        }
        if (this.props.categories) {
            this.setState({
                categories: this.props.categories
            })
        }
    }

    handleChange = (name, value)=> {
        if (name == "examCategoryId") {
            this.state.data[name] = value;
        } else {
            this.state.data[name] = value.trim();
        }
    };

    saveHandel = ()=> {
        let data = this.state.data;
        if (data.examCategoryId == null || data.examCategoryId.length == 0) {
            message.error("请选择类别");
            return;
        }
        if (data.name.length == 0) {
            message.error("科目名称不能为空");
            return;
        }
        this.setState({
            loading: true
        });
        console.log("----", data)
        this.props.commitHandle(data);

    };

    render() {
        const data = this.state.data;
        console.log(data);
        return (
            <Modal
                visible={true}
                footer={null}
                closable={!this.state.loading}
                title={this.props.edit?"修改科目":"添加科目"}
                onCancel={()=>{this.props.handleCancel()}}
            >
                <div className="card-subject">
                    <div className="card">
                        类别名称:
                    </div>
                    <div className="card">
                        { this.state.categories && this.state.categories.length > 0 ?
                            <Select
                                showSearch
                                defaultValue={
                                    this.props.choose?
                                        this.props.choose:
                                            data.examCategoryId && data.examCategoryId.length!=0?
                                                data.examCategoryId:"请选择类别"
                                }
                                style={{ width: 200 }}
                                placeholder="请选择类别"
                                optionFilterProp="children"
                                onChange={(value)=>{this.handleChange("examCategoryId",value)}}
                                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                            >
                                {
                                    this.state.categories.map((item, index)=> {
                                        return (
                                            <Option key={"option_"+item.id} value={item.id}>{item.name}</Option>

                                        )
                                    })
                                }
                            </Select>
                            :
                            null
                        }
                    </div>
                </div>
                <div className="card-category">
                    <div>
                        科目名称:
                    </div>
                    <div>
                        <Input
                            defaultValue={data.name}
                            type="text"
                            placeholder="请输入科目名称"
                            onChange={(e)=>{this.handleChange("name",e.target.value)}}
                        />
                    </div>
                </div>
                <div className="card-category" style={{display:"none"}}>
                    <div>
                        是否可用:
                    </div>
                    <div>
                        <Select
                            defaultValue={data.status.toString()}
                            onChange={(value)=>{this.handleChange("status",value)}}
                        >
                            <Option value="0">是</Option>
                            <Option value="1">否</Option>
                        </Select>
                    </div>
                </div>
                <div className="card-category">
                    <div>
                        备注:
                    </div>
                    <div>
                        <TextArea
                            type="text"
                            placeholder="请输入描述或说明"
                            defaultValue={data.note}
                            onChange={(e)=>this.handleChange("note",e.target.value)}
                        />
                    </div>
                </div>
                <div className="submit-div">
                    <Button
                        loading={this.state.loading}
                        type="primary"
                        onClick={this.saveHandel}
                    >
                        {this.props.edit ? "修改" : "保存"}
                    </Button>
                </div>
            </Modal>
        )
    }

}

export default SubjectComponent;